<template>
  <div class="content">
    <div id="cnode"> 
      <CHeader></CHeader> 
      <div class="home" v-if="!isLoad">
         <ul>
           <li v-for="(article, index) in articles">
              <router-link :to="{ name: 'topic', params: {id: article.id}}">
                  <div class="top">
                    <div class="headImg" :style="{'background-image': 'url('+article.author_img+')'}"></div>
                    <div class="box">
                      <p>{{article.author_name}}</p>
                      <div class="day">
                         <p>{{article.create_at}}</p>
                         <p class="left">#分享#</p>
                      </div>
                    </div>
                  </div>
                  <div class="title">
                   {{article.title}}
                  </div>
                  <div class="expand">
                   <div class="item">
                     <i class="iconfont"></i>
                     {{article.visit_count}}
                   </div>
                   <div class="item">
                     <i class="iconfont"></i>
                     {{article.reply_count}}
                   </div>
                   <div class="item clear-border">{{article.last_reply_at}}</div>
                 </div>
              </router-link>
           </li>
         </ul>
      </div>
      <load v-if="isLoad"></load>
      <CFooter></CFooter>
    </div>
    
  </div>
  
</template>



<script>
import CHeader from './common/CHeader'
import CFooter from './common/CFooter'
import load from './load'
import { leaveDay , parseTime } from '../util/Time'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      articles: [],
      isLoad: true
    }
  },
  created(){
      this.fetchData();
  },
  components:{
     CHeader,CFooter,load
  },
  watch:{
     '$route': 'fetchData'
  },
  methods:{
      leaveDay,
      parseTime,
      async fetchData(){
         this.clearAll();
         let tab = !this.$route.query.tab?'':this.$route.query.tab;
         let data = await this.$https.get('/topics?mdrender=false&limit=20&page=1&tab='+tab);
         if(data.status == 200){
             let res = data.data.data;
             res.map((value,index,arr) =>{
                  let obj = {};
                  obj.author_name = value.author.loginname;
                  obj.author_img = value.author.avatar_url;
                  obj.title = value.title;
                  obj.reply_count = value.reply_count;
                  obj.visit_count = value.visit_count;
                  obj.id = value.id;
                  obj.create_at = this.leaveDay(this.parseTime(value.create_at));//this.leaveDay(value.create_at,false);
                  obj.last_reply_at = this.leaveDay(this.parseTime(value.last_reply_at));
                  this.articles.push(obj);
             });
             this.isLoad = false;
         }
      },
      parseTime(Time){
          return Time.replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
      },
      clearAll(){
          this.articles = [];
          this.isLoad = true;
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.content
  width 100%
  height 100%
#cnode
  width 100%
  height 100%
  display flex
  flex-flow column wrap
  background #eee
  .home
    flex 1
    overflow auto
    ul
      margin 0px
      padding 0px
      overflow hidden
      li
        padding 15px 15px 0 15px
        margin-bottom 15px
        list-style none
        box-shadow 0 0 5px #ccc
        background #fff
        a
          &:focus
            text-decoration none
          .top
            height 40px
            display flex
          .headImg
            overflow hidden
            width 30px
            height 30px
            border-radius 50%
            border 1px solid #ddd
            background-position center
            background-size cover
            align-self center
          .box
            flex 1
            margin-left 8px
            >p
              line-height 24px
              font-size 16px
              font-weight normal
              color #080808
            .day
              display flex
              p
                font-size 12px
                color #a2a2a2
              .left
                padding-left 5px
                color #80bd01
          .title
            padding 10px 0
            line-height 22px
            font-size 16px
            font-weight bold
            color #222
          .expand
            padding 10px 0
            border-top 1px solid #e1e1e1
            text-align center
            display flex
            .item
              flex 1
              padding 0 10px
              line-height 20px
              text-align center
              border-right 1px solid #e1e1e1
              font-size 12px
              color #aaa
              .iconfont
                font-family "iconfont" !important
                font-size 16px
                font-style normal
                -webkit-font-smoothing antialiased
                color #aaa
                -webkit-text-stroke-width .2px
                &:before
                  content "\E601"
            .clear-border
              border none
            
</style>
